<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="favicon.ico"
	type="./resources/favicon.ico" />
<link rel="stylesheet" href="./resources/css/index2.css" />
</head>
<script type="text/javascript">
	window.onload = function() {
		//给监测按钮设置点击事件
		var btn = document.getElementById("btn1");
		btn.onclick = function() {
			var url = document.getElementById("url");
			var value = url.value;
			var value1 = value;
			// 因为我们需要传递的是一个url,所以我们需要对url这个字符串进行一波编码
			value = escape(value);
			if (value.trim() == null || value.trim().length == 0) {
				alert("请输入url");
				return;
			} else {
				//1 获取Ajax引擎对象XMLHttpRequest对象(基于XML的请求对象),这是个标准,任何浏览器都有,IE6没有
				/**
				 * 自定义方法
				 * ,在下面写的
				 */
				var xhr = createXMLHttpRequest();

				//2 配置请求连接URL,代表浏览器要发出的请求,以及请求目的地,还有就是请求是否异步(可以看做多线程)
				//这个请求不是直接发出,而是配置给了ajax引擎,由他去发出
				// 第一个参数, 请求方式 , 第二个参数 , url , 第三个参数 , 是否异步
				xhr.open("GET", "getResult?url=" + value, true);

				//3 监视xhr对象对请求对象request的处理流程,根据不同处理流程过程中不同状态进行处理

				// 重复执行 2 3 4  我我们要的是 4  就判断 4 就行了
				// readyState 处理状态
				// status 返回的状态码
				xhr.onreadystatechange = function() {
					//3.1 根据xhr对象处理过程中的不同状态,进行处理
					if (xhr.readyState == 4 && xhr.status == 200) {
						console.log(xhr.responseText);
						// 转换为 JSON
						var result = JSON.parse(xhr.responseText);
						// 百科url 设置到a标签的href属性
						// 						alert(result.data.baike);
						// 结果
						//	alert(result.data.label);

						// 设置到 a标签中
						var a = document.getElementById("result");
						// 把返回结果中的换行和空格等 去掉  可以不去 看结果再定
						a.innerHTML = result.data.label.replace(/\s*/g, "")
								.replace(/[\r\n]/g, "");
						alert(result.data.label)
						//a.href = result.data.baike;
						//console.log(result);
						content.style.backgroundImage = "url(" + value1 + ")";
					}
				}

				//4 发送请求,上面的代码都是准备代码,并没有真正执行,真正的触发执行是从这里开始的
				xhr.send();

			}
		}

		/**
		 获取xml引擎的方法
		 */
		function createXMLHttpRequest() {
			// window.XMLHttpRequest 如果有值 就是true  IE 获取不到值
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				return new XMLHttpRequest();
			} else {// code for IE6, IE5
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
	}
</script>
<body>
	<!-- 头部 -->
	<header>
		<div class="box1">
			<div class="title1">尚云AI平台</div>
			<div class="nav">
				<ul class="ul1">
					<li><a href="index.jsp">首页</a></li>
					<li class="liBox"><a href="#">计算机视觉 </a>
						<div class="box2">
							<ul class="box2One">
								<li class="li1"><a href="#">图像处理</a></li>
								<li><a href="#" class="a1">表情识别</a></li>
								<li><a href="#" class="a1">人脸识别</a></li>
								<li><a href="identification.jsp" class="a1">植物识别</a></li>
								<li><a href="#" class="a2">图像分类</a></li>
								<li><a href="#" class="a2">语义分割</a></li>
							</ul>
							<ul class="box2One box2Two">
								<li class="li1"><a href="#">视频处理</a></li>
								<li><a href="#" class="a2">视频摘要</a></li>
								<li><a href="#" class="a2">视频分类</a></li>
								<li><a href="#" class="a1">视频人脸检测</a></li>
								<li><a href="#" class="a2">物体识别</a></li>
							</ul>
						</div></li>
					<li><a href="#">自然语言处理 </a></li>
					<li><a href="#">数据服务</a></li>
					<li><a href="#">解决方案</a></li>
					<li><a href="contact.jsp">联系我们 </a></li>
				</ul>
			</div>
		</div>
	</header>

	<!-- 中间主体 -->
	<section>
		<!-- 背景图 -->
		<div class="backGround">
			<p class="title">植物识别</p>
			<p class="recommend">支持百种花卉识别，返回中英文名称</p>
			<button class="button">
				<a href="contact.jsp">联系我们</a>
			</button>
		</div>

		<!-- 功能介绍 -->

		<div class="function">
			<h2>功能介绍</h2>
			<ul>
				<li class="li1"><img src="./resources/images/rentou.png" />
					<div class="wb">
						<p class="p1">识别物体名称</p>
						<p class="p2">支持识别上百种花卉，返回植物名称</p>
					</div></li>
				<li class="li2"><img src="./resources/images/dunpai.png" />
					<div class="wb">
						<p class="p1">获取百科信息</p>
						<p class="p2">支持返回百科词条URL</p>
					</div></li>
				<li class="li3"><img src="./resources/images/saomiao.png" />
					<div class="wb">
						<p class="p1">识别方式</p>
						<p class="p3">通过网络图片URL进行直接解析识别</p>
					</div></li>
			</ul>
		</div>

		<!-- 功能演示 -->

		<div class="demonstration">
			<h3>功能演示</h3>
			<div class="max" id="max">

				<div>
					<input type="text" id="url" placeholder="请输入网络图片URL" />
					<button class="btn1" id="btn1">监测</button>
					<p>图片文件类型支持PNG、JPG、JPEG，图片大小不超过2M。</p>
				</div>
				<!-- 识别结果 -->
				<div class="resulte1" id="resulte1">
					<a href="" id="result">识别结果:玫瑰</a>
				</div>
			</div>
			<div class="min">
				<img src="./resources/images/xiao1.jpg" /> <img
					src="./resources/images/xiao2.jpg" /> <img
					src="./resources/images/xiao3.jpg" /> <img
					src="./resources/images/xiao4.jpg" />
			</div>
		</div>

		<!-- 特色优势 -->
		<div class="function">
			<h2>特色优势</h2>
			<ul>
				<li class="li1"><img src="./resources/images/rentou.png" />
					<div class="wb">
						<p class="p1">主流算法</p>
						<p class="p2">基于caffe框架和海量数据训练，算法识别准确率高</p>
					</div></li>
				<li class="li2"><img src="./resources/images/dunpai.png" />
					<div class="wb">
						<p class="p1">服务稳定高效</p>
						<p class="p2">提供企业级稳定、精确的大流量服务。支持毫秒级的识别响应能力、弹性灵活的高并发</p>
					</div></li>
				<li class="li3"><img src="./resources/images/saomiao.png" />
					<div class="wb">
						<p class="p1">灵活简单易用</p>
						<p class="p3">可对SDK进行二次开发，灵活调整业务代码，实现不同的业务功能</p>
					</div></li>
			</ul>
		</div>

	</section>

	<!-- 底部 -->
	<footer>
		<div class="footer-box">
			友情链接： <a>星云数据平台</a> <a>尚云科技</a> <a>天亮教育官网</a> <a>尚云舆情2.0</a>
		</div>
		<div class="footer-item">Copyright © 2017-2025 河北尚云信息科技有限公司
			备案号:冀ICP备17020003号</div>
	</footer>
</body>
<script>
	// 获取元素
	var title = document.getElementsByClassName("min")[0]
			.getElementsByTagName("img");
	var content = document.getElementById("max");
	var result1 = document.getElementById("result");
	// console.log(content);
	// 绑定事件
	for (let i = 0; i < title.length; i++) {
		console.log(i);
		title[i].onclick = function() {
			result1.innerText = "";
			content.style.backgroundImage = "url(" + this.src + ")";
			result1.innerText = "这是玫瑰 : " + (i + 1) + "号!";
		}
	}
</script>

</html>